<template>
	<view class="content">
		<view class="item flex-bt" @tap="up()">
			<image @tap.stop="previewImg" :src="showImg || userInfo.headimg  || 'http://test.jiumeifu.cc/static/shop/img/default_user.png'" mode="aspectFill" class="face"></image>
			<view class="right">
				<text>修改头像</text>
				<u-icon name="arrow-right" color="#b2b2b2" size="24"></u-icon>
			</view>
		</view>
		<view class="item flex-bt" @tap="show = true,type = 1,title = '修改昵称'">
			<view class="h3">
				设置昵称
			</view>
			<view class="right" >
				<text>{{newName || userInfo.nickname}}</text>
				<u-icon name="arrow-right" color="#b2b2b2" size="24"></u-icon>
			</view>
		</view>
		<view class="exit ct" @tap="exit">
			安全退出
		</view>
		
		<!-- 修改昵称弹窗 -->
		<u-modal v-model="show" @confirm="infoChange" :title="title" show-cancel-button>
			<view class="slot-content">
				<!-- 昵称 -->
				<input class="changeInp" placeholder-style="color: #A9A9A9" type="nickname" placeholder="请输入您的昵称" maxlength="16" v-model="nickname">
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import {logout,user_info,pay_password,log_password,change_mobile,change_name,user_setInfo} from '@/config/user/api.js';
	import storge from '@/common/storge.js';
	import config from '@/common/config.js';
	import http from '@/config/config.js';
	export default {
		data() {
			return {
				showImg:'',
				show:false,
				type:1,
				title:'修改昵称',
				nickname:'',
				newName:'',
			}
		},
		components: {
			
		},
		onLoad(o) {
			
		},
		onShareAppMessage() {
		    
		},
		watch:{
			
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		created() {
			let that = this;
			const token = uni.getStorageSync('token');
			let url =  http.baseUrl + '/api/upload/image';
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				uni.uploadFile({
					url,
					filePath: path,
					name: 'file',
					header: {
						token,
						// 'content-type': 'multipart/form-data'  
					},
					// formData: {
					// 	file:'file',
					// },
					success: async (res) => {
						console.log(res);
						var jsarr = JSON.parse(res.data);
						console.log(jsarr)
						that.showImg = jsarr.data.uri;
						that.infoChange('headimg',jsarr.data.uri);
						
					},
					fail: function(res) {
						console.log(res);
					}
				});
				
			})
		},
		methods: {	
			getCode(type) {
				this.$common.getCode(this,type);
			},
			async infoChange(field = 'nickname',value = this.nickname){
				const that = this;
				const res =  await user_setInfo({field,value});
				if (res.code != 1) {
					this.$common.showTip(res.msg, 'none');
					return
				};
				that.$common.showTip('修改成功', 'none');
				that.nickname = '';
				const token = uni.getStorageSync('token');
				const userInfo =  await user_info({token:token});
				storge.set('memberInfo',userInfo.data);
				that.$store.commit('setUserInfo', userInfo.data);
				
			},
			async exit(){
				const that = this;
				// const res = await logout();
				// if (res.code != 1) {
				// 	this.$common.showTip(res.msg, 'none')
				// 	return
				// };
				
				this.$common.showTip('已退出当前账号', 'none');
				storge.remove('memberInfo');
				storge.remove('token');
				that.$store.commit('setUserInfo', null);
				that.$store.commit('setToken', null);
				setTimeout(()=>{
					that.$common.goback();
				},1500)
			},
			
			previewImg(){
				const that = this;
				let img = that.showImg || that.userInfo.headimg;
				uni.previewImage({
					urls:[img],
					current:img
				})
			},
			up() {
				this.$u.route({
					url: '/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'png',
					}
				})
			},
			...mapMutations(['setUserInfo'])
		}
	}
</script>


<style scoped lang="scss">
	.content{
		min-height: 100vh;
		background: #f5f5f5;
	}
	.item{
		font-size: $font-b;
		color: $black;
		padding: 32rpx;
		background: #fff;
		border-top: 1px solid rgba(0,0,0,.1);
		&:first-of-type{
			border-top: 0;
		}
		.face{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.right{
			text{
				margin-right: 16rpx;
			}
		}
	}
	.exit{
		margin-top: 20rpx;
		font-size: $font-b;
		color: $black;
		padding: 32rpx;
		background: #fff;
		font-size: $font-b;
		color: $red;
	}
	.changeInp{
		width: 544rpx;
		height: 96rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		text-align: center;
		color: $black;
		margin: 35rpx auto 53rpx;
		background: #F8FAFD;
	}
	.w .changeInp{
		margin-bottom: 0;
	}
	.form-item {
		position: relative;
		width: 544rpx;
		height: 96rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		text-align: center;
		color: $black;
		margin: 35rpx auto 53rpx;
		background: #F8FAFD;
	
		.form-txt {
			width: 100%;
			height: 30px;
			line-height: 30px;
			color: #2f3541;
		}
	
	
		&.code {
			padding-right: 30%;
	
			.btnget {
				height: 30px;
				border-radius: 50px;
				color: $blue;
				padding: 0 0.75rem;
				position: absolute;
				right: 0;
				font-size: 13px;
				font-weight: bold;
				top: 0;
				bottom: 0;
				margin: auto;
				border-radius: 20rpx;
				z-index: 8;
				border: 1px solid $blue;
	
				&.active {
					color: #9a9da7;
					border-color: #ccd0db;
				}
			}
		}
	}
	
</style>